<template>
  <view class="business-statistics-page">
    <!-- 顶部蓝色背景 -->
    <view class="top-bg"></view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view
        class="filter-tab"
        :class="{ active: currentTab === 'today' }"
        @click="switchTab('today')"
      >
        今日
      </view>
      <view
        class="filter-tab"
        :class="{ active: currentTab === 'yesterday' }"
        @click="switchTab('yesterday')"
      >
        昨日
      </view>
      <view class="filter-custom" @click.stop="openCustom">
        自定义
        <text class="dropdown-icon">▾</text>
        <!-- 自定义筛选弹窗 -->
        <view class="custom-popup" v-if="showCustom">
          <view class="popup-item" @click="selectCustom('一周内')">一周内</view>
          <view class="popup-item" @click="selectCustom('一个月内')">一个月内</view>
          <view class="popup-item" @click="selectCustom('三个月内')">三个月内</view>
          <view class="popup-item" @click="selectCustom('半年内')">半年内</view>
          <view class="popup-item" @click="selectCustom('一年内')">一年内</view>
        </view>
      </view>
    </view>

    <view class="bottomline"></view>

    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="card-item">
		  <view class="backcolor1">
		  	        <image class="card-icon" src="@/img/00主页03_slices/活动.png"></image>
		  </view>

        <text class="card-value">¥2066.56</text>
        <text class="card-label">收入</text>
      </view>
      <view class="card-item">
		  <view class="backcolor2">
		  	<image class="card-icon" src="@/img/00主页03_slices/123收支明细.png"></image>
		  </view>
        
        <text class="card-value">53</text>
        <text class="card-label">订单量</text>
      </view>
    </view>

    <!-- 收入分布（饼图） -->
    <view class="chart-section income-distribution">
      <view class="section-header">
        <text class="section-title">收入分布</text>
        <view class="section-line"></view>
      </view>
      <view class="pie-chart">
        <!-- 标准圆形饼图容器 -->
        <view class="pie-container">
          <view class="pie" :style="{ background: conicGradient }"></view>
        </view>
        <!-- 数据标注：右侧横向排版 -->
        <view class="chart-label-group">
          <view class="chart-label">洗车 500元</view>
          <view class="chart-label">保养 1566.56元</view>
          <view class="legend">
            <view class="legend-color" :style="{ backgroundColor: '#8E6EF2' }"></view>
            <text>洗车 占比26%</text>
          </view>
          <view class="legend">
            <view class="legend-color" :style="{ backgroundColor: '#F26E91' }"></view>
            <text>保养 占比74%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单分布（柱状图） -->
    <view class="chart-section order-distribution">
      <view class="section-header">
        <text class="section-title">订单分布</text>
        <view class="section-line"></view>
      </view>
      <view class="bar-chart">
        <!-- 柱状图数据 -->
        <view
          class="bar-item"
          v-for="(item, index) in barData"
          :key="index"
        >
          <view
            class="bar"
            :style="{ 
              height: item.height, 
              backgroundColor: item.color,
              marginRight: item.marginRight 
            }"
          ></view>
          <text class="bar-label x-label" :style="{ marginRight: item.marginRight }">{{ item.name }}</text>
        </view>
        <!-- 右侧文字描述 -->
        <view class="bar-label-group">
          <text 
            class="bar-label y-label" 
            v-for="(item, index) in barData" 
            :key="index"
            :style="{ 
              color: item.color 
            }"
          >
            {{ item.label }}
          </text>
        </view>
        <!-- 坐标轴 -->
        <view class="axis"></view>
        <view class="axis-labels">
          <text class="label" v-for="(label, index) in yLabels" :key="index" :style="{ bottom: label.bottom }">{{ label.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'today', 
      showCustom: false, 
      // 饼图渐变角度（26%对应93.6°，74%对应266.4°  360*0.26=93.6  360*0.74=266.4）
      conicGradient: 'conic-gradient(#8E6EF2 93.6deg, #F26E91 93.6deg 360deg)', 
      // 柱状图数据（右侧文字版），调整文字布局
      barData: [
        { 
          name: '维修', 
          height: '200px', 
          color: '#8E6EF2', 
          label: '维修 200单', 
          marginRight: '30px' 
        },
        { 
          name: '保养', 
          height: '120px', 
          color: '#6EDBF2', 
          label: '保养 120单', 
          marginRight: '30px' 
        },
        { 
          name: '洗车', 
          height: '220px', 
          color: '#F2C66E', 
          label: '洗车 220单', 
          marginRight: '0' 
        }
      ],
      yLabels: [
        { text: '250', bottom: '250px' },
        { text: '200', bottom: '200px' },
        { text: '150', bottom: '150px' },
        { text: '100', bottom: '100px' },
        { text: '50', bottom: '50px' },
        { text: '0', bottom: '0px' }
      ]
    };
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
    },
    openCustom() {
      this.showCustom = !this.showCustom;
    },
    selectCustom(type) {
      console.log('选择自定义条件：', type);
      this.showCustom = false; 
    }
  }
};
</script>

<style scoped>
.business-statistics-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 14px;
  color: #333;
  position: relative;
  margin: 0;
  padding: 0;
}

.top-bg {
  background-color: #3399ff;
  width: 100%;
  height: 240rpx; 
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  width: 90%;
  height: 120rpx;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
  margin: -200rpx auto 0; 
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 99;
}

.filter-tab {
  padding: 8px 15px;
  margin-right: 10px; 
  border-radius: 5px;
  background-color: #f2f2f2;
}

.filter-tab.active {
  background-color: #3399ff;
  color: #fff;
}

.filter-custom {
  display: flex;
  align-items: center;
  margin-left: auto; 
}

.dropdown-icon {
  margin-left: 5px;
}

.custom-popup {
  position: absolute;
  top: 80rpx; 
  right: 20rpx;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  z-index: 999;
  min-width: 120rpx;
}

.popup-item {
  padding: 10px 15px;
  white-space: nowrap;
  border-bottom: 1px solid #f2f2f2;
}

.popup-item:last-child {
  border-bottom: none;
}

.bottomline{
  height: 3rpx;
  background-color: #ddd;
  width: 90%;
  margin: 0 5%;
}

.stats-card {
  display: flex;
  justify-content: space-around;
  width: 90%;
  height: 200rpx;
  border-radius:  0 0 10px 10px;
  background-color: #fff;
  margin: 0rpx auto 0; 
  padding-top: 20px;
  padding-bottom: 10px;
  align-items: center;
}

.card-item {
  text-align: center;
}

.backcolor1{
	background-color: orange;
	border-radius: 10px;
	height: 35px;
	width: 35px;
	margin-left: 20px;
}

.backcolor2{
	background-color: #3399ff;
	border-radius: 10px;
	height: 35px;
	width: 35px;
}

.card-icon {

  width: 30px;
  height: 30px;

}

.card-value {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.card-label {
  color: #666;
}

.chart-section {
  width: 90%;
  background-color: #fff;
  margin: 30rpx auto 0; 
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 10px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.section-line {
  flex: 1;
  height: 2rpx;
  background-color: #ddd;
  margin-left: 10rpx;
}

/* 饼图样式：右侧横向排版，进一步增大与饼图间距 */
.pie-chart {
  display: flex;
  align-items: center;
}
.pie-container {
  width: 120px;
  height: 120px;
  margin-right: 100rpx; /* 更大的间距 */
}
.pie {
  width: 120px;
  height: 120px;
  border-radius: 50%;

}
.chart-label-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chart-label {
  margin-bottom: 10rpx;
}
.legend {
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
}
.legend-color {
  width: 10px;
  height: 10px;
  margin-right: 0px;
}

/* 柱状图样式：右侧文字集中显示 */
.bar-chart {
  position: relative;
  height: 280px;
  padding-left: 100rpx;
  display: flex;
  align-items: flex-end;
}
.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bar {
  width: 40px;
}
.bar-label-group {
  position: absolute;
  right: 5rpx;
  top: 200rpx; /* 调整到合适位置集中显示 */
  display: flex;
  flex-direction: column;
}
.y-label {
  white-space: nowrap;
  margin-bottom: 20rpx; /* 统一间距 */
}
.x-label {
  margin-top: 5px;
}

/* 坐标轴 */
.axis {
  position: absolute;
  left: 70rpx;
  top: 0;
  width: 1px;
  height: 250px;
  background-color: #ccc;
}
.axis-labels {
  position: absolute;
  left: 0;
  top: 0;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10rpx;
}
.label {
  color: #666;
}

</style>